<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>柱形图渲染</title>
    <style>
        .bar-container {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
        }
        .bar {
            width: 50px;
            background-color: steelblue;
            margin: 5px;
            text-align: center;
            color: white;
            padding-top: 5px;
        }
    </style>
</head>
<body>
    <h1>柱形图渲染</h1>
    <div>
        <label for="q1">第一季度:</label>
        <input type="number" id="q1" value="50">
    </div>
    <div>
        <label for="q2">第二季度:</label>
        <input type="number" id="q2" value="70">
    </div>
    <div>
        <label for="q3">第三季度:</label>
        <input type="number" id="q3" value="60">
    </div>
    <div>
        <label for="q4">第四季度:</label>
        <input type="number" id="q4" value="80">
    </div>
    <button onclick="generateBarChart()">生成柱形图</button>
    <div id="bar-chart" class="bar-container"></div>

    <script>
        function generateBarChart() {
            const q1 = parseInt(document.getElementById('q1').value);
            const q2 = parseInt(document.getElementById('q2').value);
            const q3 = parseInt(document.getElementById('q3').value);
            const q4 = parseInt(document.getElementById('q4').value);

            const barChartContainer = document.getElementById('bar-chart');
            barChartContainer.innerHTML = ''; // 清空之前的柱形图

            const quarters = [q1, q2, q3, q4];
            quarters.forEach((value, index) => {
                const bar = document.createElement('div');
                bar.className = 'bar';
                bar.style.height = value + 'px';
                bar.textContent = value;
                barChartContainer.appendChild(bar);
            });
        }
    </script>
</body>
</html>